Adwaita: first round of OSD style converage

Some code refactoring, entry and spinbuttons and flat buttons
styled, more to come...

diff --git a/gtk/resources/theme/Adwaita/_colors.scss b/gtk/resources/theme/Adwaita/_colors.scss
index 200969a115174bc65ee11b49af0fe53be8bfe08b..59c50e0a78737a6eda0f443a0a2abc617fba111d 100644 (file)
--- a/gtk/resources/theme/Adwaita/_colors.scss
+++ b/gtk/resources/theme/Adwaita/_colors.scss
@@ -22,7 +22,10 @@ $success_color: if($variant == 'light', #73d216, darken(#73d216,10%));
 $destructive_color: if($variant == 'light', #ef2929, darken(#ef2929,10%));
 
 $osd_fg_color: #eeeeec;
+$osd_text_color: white;
 $osd_bg_color: #2e3436;
+$osd_insensitive_bg_color: mix($osd_fg_color, $osd_bg_color, 10%);
+$osd_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 50%);
 $osd_borders_color: transparentize(black, 0.3);
 $osd_outer_borders_color: transparentize(white, 0.9);
 

diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 38f6e4abc14c1d2aeee9a04b10a74d342bd430be..e7b4d56e56d6cb2bace39afbb74bc77684d6fcfd 100644 (file)
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -202,7 +202,11 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers
 
 %osd, .osd {
   color: $osd_fg_color;
+  border-color: $osd_outer_borders_color;
+  background-color: transparentize($osd_bg_color, 0.3);
+  background-clip: padding-box;
   outline-color: transparentize($osd_fg_color, 0.7);
+  box-shadow: none;
   text-shadow: 0 1px black;
   icon-shadow: 0 1px black;
   &:backdrop { text-shadow: none; }
@@ -400,6 +404,11 @@ GtkTextView { // This will get overridden by .view, needed by gedit line numbers
       }
     }
   }
+  .osd & {
+    @include entry(osd);
+    &:focus { @include entry(osd-focus); }
+    &:backdrop { @include entry(osd-backdrop); }
+  }
 }
 
 /***********
@@ -496,13 +505,11 @@ $_dot_color: if($variant=='light', $selected_bg_color,
     &:active, &:checked {
       @include button(osd-active);
       border-color: $osd_outer_borders_color;
-      box-shadow: none
+      box-shadow: none;
     }
     &:insensitive, &:backdrop:insensitive {
       @include button(osd-insensitive);
       border-color: $osd_outer_borders_color;
-      // FIXME: if this state actually exists we should probably make the button
-      //        disappear
     }
     &:backdrop {
       @include button(osd-backdrop);
@@ -511,9 +518,6 @@ $_dot_color: if($variant=='light', $selected_bg_color,
   }
   //overlay / OSD style
   .osd & {
-    // FIXME: for some reason I can't figure out the bookmark button in gnome
-    //        documents gets borders radius 0, when they get backdrop and
-    //        another state
     @include button(osd);
     // there's a problem with sass which prevents it to extend the linked
     // placeholder as expected, it should just be "@extend %linked;", the
@@ -556,6 +560,31 @@ $_dot_color: if($variant=='light', $selected_bg_color,
       @include button(osd-backdrop);
       @extend %linked;
     }
+    &.flat {
+      @include button(undecorated);
+      box-shadow: none; //FIXME respect no edge on the button mixin
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black;
+      &:hover {
+        @include button(osd-hover);
+        background-clip: padding-box;
+        border-color: transparent;
+        box-shadow: none;
+      }
+      &:insensitive {
+        @include button(osd-insensitive);
+        background-image: none;
+        border-color: transparent;
+        box-shadow: none;
+      }
+      &:backdrop { @include button(undecorated); }
+      &:active, &:checked {
+        @include button(osd-active);
+        background-clip: padding-box;
+        border-color: transparent;
+        box-shadow: none;
+      }
+    }
   }
 
   // Suggested and Destructive Action buttons
@@ -904,6 +933,42 @@ GtkColorButton.button {
       &:dir(rtl) { border-style: none solid none none; }
     }
   }
+  .osd & {
+    .button {
+      @include button(undecorated);
+      color: $osd_fg_color;
+      border-style: none none none solid;
+      border-color: transparentize($osd_borders_color, 0.3);
+      border-radius: 0;
+      box-shadow: none;
+      icon-shadow: 0 1px black;
+      &:dir(rtl) { border-style: none solid none none; }
+      &:hover {
+        @include button(undecorated);
+        color: $osd_fg_color;
+        border-color: transparentize($osd_borders_color, 0.3);
+        background-color: transparentize($osd_fg_color, 0.9);
+        icon-shadow: 0 1px black;
+        box-shadow: none;
+      }
+      &:backdrop {
+        @include button(undecorated);
+        color: $osd_fg_color;
+        border-color: transparentize($osd_borders_color, 0.3);
+        icon-shadow: none;
+        box-shadow: none;
+      }
+      &:insensitive {
+        @include button(undecorated);
+        color: $osd_insensitive_fg_color;
+        border-color: transparentize($osd_borders_color, 0.3);
+        icon-shadow: none;
+        box-shadow: none;
+      }
+      &:last-child { border-radius: 0 3px 3px 0; }
+      &:dir(rtl):first-child { border-radius: 3px 0 0 3px; }
+    }
+  }
   &.vertical, &.vertical:dir(rtl) { //FIXME: try using linking templates for vertically linked stuff
     .button {
       padding-top: 8px;    //  Same vertical padding as image-buttons
@@ -1503,21 +1568,7 @@ column-header.button.dnd { // for treeview-like derive widgets
     text-shadow: none;
     transition: none;
   }
-  &.osd { // Also used for touch cut'n'paste overlays
-          // FIXME Doesn't work
-    background-image: none;
-    background-color: $osd_bg_color;
-    border: 1px solid $borders_color;
-    color: $osd_fg_color;
-    .button {
-      color: white;
-      text-shadow: none;
-      @include button(osd);
-      &:hover { @include button(osd-hover); };
-      &:active { @include button(osd-active); };
-      &:insensitive { @include button(osd-insensitive); };
-    }
-  }
+  &.osd { @extend %osd; }
 }
 
 //touch selection handlebars for the Popover.osd above

diff --git a/gtk/resources/theme/Adwaita/_drawing.scss b/gtk/resources/theme/Adwaita/_drawing.scss
index 2285e6ce495dd07cf01c9f7d6c76f6539700dcf8..89ad568667a696da69c6011c37258f26e8aa8f09 100644 (file)
--- a/gtk/resources/theme/Adwaita/_drawing.scss
+++ b/gtk/resources/theme/Adwaita/_drawing.scss
@@ -44,7 +44,7 @@
 //        use the default one
 //
 // possible $t values:
-// normal, focus, insensitive, backdrop, backdrop-insensitive;
+// normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop;
 //
   background-color: transparent;
   background-image: entry_gradient($base_color);
@@ -92,6 +92,30 @@
     background-image: linear-gradient(to bottom, $insensitive_bg_color);
     @include _shadows($_blank_inner_shadows, $_blank_edge);
   }
+  @if $t==osd {
+    color: $osd_text_color;
+    border-color: $osd_borders_color;
+    background-image: linear-gradient(to bottom, transparentize(black, 0.5));
+    box-shadow: none;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;
+  }
+  @if $t==osd-focus {
+    color: $osd_text_color;
+    border-color: $selected_bg_color;
+    background-image: linear-gradient(to bottom, transparentize(black, 0.5));
+    box-shadow: entry_focus_glow($selected_bg_color);
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black;
+  }
+  @if $t==osd-backdrop {
+    color: $osd_text_color;
+    border-color: $osd_borders_color;
+    background-image: linear-gradient(to bottom, transparentize(black, 0.5));
+    box-shadow: none;
+    text-shadow: none;
+    icon-shadow: none;
+  }
 }
 
 // buttons
@@ -327,8 +351,7 @@
     background-clip: padding-box;
     background-image: linear-gradient(to bottom, $_bg);
     border-color: $osd_borders_color;
-    box-shadow: inset 0 -1px transparentize(black, 0.7),
-                inset 0 1px transparentize(white, 0.9);
+    box-shadow: inset 0 1px transparentize(white, 0.9);
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
   }
@@ -342,8 +365,7 @@
     color: white;
     border-color: $osd_borders_color;
     background-image: linear-gradient(to bottom, $_bg);
-    box-shadow: inset 0 -1px transparentize(black, 0.7),
-                inset 0 1px transparentize(white, 0.9);
+    box-shadow: inset 0 1px transparentize(white, 0.9);
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
 
@@ -365,9 +387,9 @@
   //
   // insensitive osd button
   //
-    $_bg: transparentize(mix($insensitive_fg_color,$osd_bg_color,20%),0.3);
+    $_bg: transparentize($osd_insensitive_bg_color,0.5);
 
-    color: $insensitive_fg_color;
+    color: $osd_insensitive_fg_color;
     border-color: $osd_borders_color;
     background-image: linear-gradient(to bottom, $_bg);
     box-shadow: none;
@@ -382,8 +404,8 @@
                             transparentize($osd_bg_color, 0.3));
 
     color: $osd_fg_color;
+    border-color: $osd_borders_color;
     background-image: linear-gradient(to bottom, $_bg);
-    background-clip: padding-box;
     box-shadow: none;
     text-shadow: none;
     icon-shadow: none;

diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index b33c94ebff8be1b278ec5301328f39d1c73d5ea9..a2645114b663a1f64b8b0055df2e74e3a38b95c9 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -132,13 +132,17 @@ GtkTextView {
   .grid-child:selected {
     outline-offset: -2px; }
 
-.app-notification,
+.popover.osd, .app-notification,
 .app-notification.frame, .osd {
   color: #eeeeec;
+  border-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(46, 52, 54, 0.7);
+  background-clip: padding-box;
   outline-color: rgba(238, 238, 236, 0.3);
+  box-shadow: none;
   text-shadow: 0 1px black;
   icon-shadow: 0 1px black; }
-  .app-notification:backdrop, .osd:backdrop {
+  .popover.osd:backdrop, .app-notification:backdrop, .osd:backdrop {
     text-shadow: none; }
 
 /*********************
@@ -378,6 +382,33 @@ GtkTextView {
         border-color: #1e2222;
         background-image: linear-gradient(to bottom, #2c2c2c);
         box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(238, 238, 236, 0); }
+  .osd .entry {
+    background-color: transparent;
+    background-image: linear-gradient(to bottom, #212121, #292929 90%);
+    color: white;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+    box-shadow: none;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
+    .osd .entry:focus {
+      background-color: transparent;
+      background-image: linear-gradient(to bottom, #212121, #292929 90%);
+      color: white;
+      border-color: #215d9c;
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+      box-shadow: inset 0 0 0 1px rgba(33, 93, 156, 0.7);
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black; }
+    .osd .entry:backdrop {
+      background-color: transparent;
+      background-image: linear-gradient(to bottom, #212121, #292929 90%);
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none; }
 
 /***********
  * Buttons *
@@ -536,7 +567,7 @@ GtkCalendar.header .button.titlebutton {
     background-clip: padding-box;
     background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
     border-color: rgba(0, 0, 0, 0.7);
-    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
     border-color: rgba(255, 255, 255, 0.1);
@@ -549,7 +580,7 @@ GtkCalendar.header .button.titlebutton {
       color: white;
       border-color: rgba(0, 0, 0, 0.7);
       background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black;
       border-color: rgba(255, 255, 255, 0.1);
@@ -564,17 +595,17 @@ GtkCalendar.header .button.titlebutton {
       border-color: rgba(255, 255, 255, 0.1);
       box-shadow: none; }
     .button.osd:insensitive, .button.osd:backdrop:insensitive {
-      color: #939695;
+      color: #8e9191;
       border-color: rgba(0, 0, 0, 0.7);
-      background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7));
+      background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none;
       border-color: rgba(255, 255, 255, 0.1); }
     .button.osd:backdrop {
       color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.7);
       background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
-      background-clip: padding-box;
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none;
@@ -590,7 +621,7 @@ GtkCalendar.header .button.titlebutton {
     background-clip: padding-box;
     background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
     border-color: rgba(0, 0, 0, 0.7);
-    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
     border-radius: 0;
@@ -613,7 +644,7 @@ GtkCalendar.header .button.titlebutton {
       color: white;
       border-color: rgba(0, 0, 0, 0.7);
       background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black; }
     .osd .button:active, .osd .button:checked, .osd .button:backdrop:active, .osd .button:backdrop:checked {
@@ -624,19 +655,90 @@ GtkCalendar.header .button.titlebutton {
       text-shadow: none;
       icon-shadow: none; }
     .osd .button:insensitive, .osd .button:backdrop:insensitive {
-      color: #939695;
+      color: #8e9191;
       border-color: rgba(0, 0, 0, 0.7);
-      background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7));
+      background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none; }
     .osd .button:backdrop {
       color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.7);
       background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
-      background-clip: padding-box;
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none; }
+    .osd .button.flat, .osd .header-bar .titlebutton.button, .header-bar .osd .titlebutton.button,
+    .osd .titlebar .titlebutton.button,
+    .titlebar .osd .titlebutton.button,
+    .osd GtkCalendar.header .titlebutton.button,
+    GtkCalendar.header .osd .titlebutton.button {
+      border-color: transparent;
+      background-color: transparent;
+      background-image: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: none;
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black; }
+      .osd .button.flat:hover, .osd .header-bar .titlebutton.button:hover, .header-bar .osd .titlebutton.button:hover,
+      .osd .titlebar .titlebutton.button:hover,
+      .titlebar .osd .titlebutton.button:hover,
+      .osd GtkCalendar.header .titlebutton.button:hover,
+      GtkCalendar.header .osd .titlebutton.button:hover {
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+        text-shadow: 0 1px black;
+        icon-shadow: 0 1px black;
+        background-clip: padding-box;
+        border-color: transparent;
+        box-shadow: none; }
+      .osd .button.flat:insensitive, .osd .header-bar .titlebutton.button:insensitive, .header-bar .osd .titlebutton.button:insensitive,
+      .osd .titlebar .titlebutton.button:insensitive,
+      .titlebar .osd .titlebutton.button:insensitive,
+      .osd GtkCalendar.header .titlebutton.button:insensitive,
+      GtkCalendar.header .osd .titlebutton.button:insensitive {
+        color: #8e9191;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none;
+        background-image: none;
+        border-color: transparent;
+        box-shadow: none; }
+      .osd .button.flat:backdrop, .osd .header-bar .titlebutton.button:backdrop, .header-bar .osd .titlebutton.button:backdrop,
+      .osd .titlebar .titlebutton.button:backdrop,
+      .titlebar .osd .titlebutton.button:backdrop,
+      .osd GtkCalendar.header .titlebutton.button:backdrop,
+      GtkCalendar.header .osd .titlebutton.button:backdrop {
+        border-color: transparent;
+        background-color: transparent;
+        background-image: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
+        text-shadow: none;
+        icon-shadow: none; }
+      .osd .button.flat:active, .osd .header-bar .titlebutton.button:active, .header-bar .osd .titlebutton.button:active,
+      .osd .titlebar .titlebutton.button:active,
+      .titlebar .osd .titlebutton.button:active,
+      .osd GtkCalendar.header .titlebutton.button:active,
+      GtkCalendar.header .osd .titlebutton.button:active, .osd .button.flat:checked, .osd .header-bar .titlebutton.button:checked, .header-bar .osd .titlebutton.button:checked,
+      .osd .titlebar .titlebutton.button:checked,
+      .titlebar .osd .titlebutton.button:checked,
+      .osd GtkCalendar.header .titlebutton.button:checked,
+      GtkCalendar.header .osd .titlebutton.button:checked {
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none;
+        background-clip: padding-box;
+        border-color: transparent;
+        box-shadow: none; }
   .button.suggested-action, .header-bar .suggested-action.button.titlebutton,
   .titlebar .suggested-action.button.titlebutton,
   GtkCalendar.header .suggested-action.button.titlebutton {
@@ -756,14 +858,14 @@ GtkCalendar.header .button.titlebutton {
       background-clip: padding-box;
       background-image: linear-gradient(to bottom, rgba(33, 93, 156, 0.5));
       border-color: rgba(0, 0, 0, 0.7);
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black; }
       .osd .button.suggested-action:hover {
         color: white;
         border-color: rgba(0, 0, 0, 0.7);
         background-image: linear-gradient(to bottom, rgba(33, 93, 156, 0.7));
-        box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
         text-shadow: 0 1px black;
         icon-shadow: 0 1px black; }
       .osd .button.suggested-action:active, .osd .button.suggested-action:checked, .osd .button.suggested-action:backdrop:active, .osd .button.suggested-action:backdrop:checked {
@@ -774,16 +876,16 @@ GtkCalendar.header .button.titlebutton {
         text-shadow: none;
         icon-shadow: none; }
       .osd .button.suggested-action:insensitive, .osd .button.suggested-action:backdrop:insensitive {
-        color: #939695;
+        color: #8e9191;
         border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7));
+        background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
         box-shadow: none;
         text-shadow: none;
         icon-shadow: none; }
       .osd .button.suggested-action:backdrop {
         color: #eeeeec;
+        border-color: rgba(0, 0, 0, 0.7);
         background-image: linear-gradient(to bottom, rgba(33, 93, 156, 0.5));
-        background-clip: padding-box;
         box-shadow: none;
         text-shadow: none;
         icon-shadow: none; }
@@ -906,14 +1008,14 @@ GtkCalendar.header .button.titlebutton {
       background-clip: padding-box;
       background-image: linear-gradient(to bottom, rgba(213, 16, 16, 0.5));
       border-color: rgba(0, 0, 0, 0.7);
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black; }
       .osd .button.destructive-action:hover {
         color: white;
         border-color: rgba(0, 0, 0, 0.7);
         background-image: linear-gradient(to bottom, rgba(213, 16, 16, 0.7));
-        box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
         text-shadow: 0 1px black;
         icon-shadow: 0 1px black; }
       .osd .button.destructive-action:active, .osd .button.destructive-action:checked, .osd .button.destructive-action:backdrop:active, .osd .button.destructive-action:backdrop:checked {
@@ -924,16 +1026,16 @@ GtkCalendar.header .button.titlebutton {
         text-shadow: none;
         icon-shadow: none; }
       .osd .button.destructive-action:insensitive, .osd .button.destructive-action:backdrop:insensitive {
-        color: #939695;
+        color: #8e9191;
         border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7));
+        background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
         box-shadow: none;
         text-shadow: none;
         icon-shadow: none; }
       .osd .button.destructive-action:backdrop {
         color: #eeeeec;
+        border-color: rgba(0, 0, 0, 0.7);
         background-image: linear-gradient(to bottom, rgba(213, 16, 16, 0.5));
-        background-clip: padding-box;
         box-shadow: none;
         text-shadow: none;
         icon-shadow: none; }
@@ -1405,6 +1507,59 @@ GtkCalendar.header .button.titlebutton:visited {
       border-style: none none none solid; }
       .spinbutton .button:backdrop:insensitive:dir(rtl) {
         border-style: none solid none none; }
+  .osd .spinbutton .button {
+    border-color: transparent;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
+    text-shadow: none;
+    icon-shadow: none;
+    color: #eeeeec;
+    border-style: none none none solid;
+    border-color: rgba(0, 0, 0, 0.4);
+    border-radius: 0;
+    box-shadow: none;
+    icon-shadow: 0 1px black; }
+    .osd .spinbutton .button:dir(rtl) {
+      border-style: none solid none none; }
+    .osd .spinbutton .button:hover {
+      border-color: transparent;
+      background-color: transparent;
+      background-image: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
+      text-shadow: none;
+      icon-shadow: none;
+      color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.4);
+      background-color: rgba(238, 238, 236, 0.1);
+      icon-shadow: 0 1px black;
+      box-shadow: none; }
+    .osd .spinbutton .button:backdrop {
+      border-color: transparent;
+      background-color: transparent;
+      background-image: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
+      text-shadow: none;
+      icon-shadow: none;
+      color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.4);
+      icon-shadow: none;
+      box-shadow: none; }
+    .osd .spinbutton .button:insensitive {
+      border-color: transparent;
+      background-color: transparent;
+      background-image: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
+      text-shadow: none;
+      icon-shadow: none;
+      color: #8e9191;
+      border-color: rgba(0, 0, 0, 0.4);
+      icon-shadow: none;
+      box-shadow: none; }
+    .osd .spinbutton .button:last-child {
+      border-radius: 0 3px 3px 0; }
+    .osd .spinbutton .button:dir(rtl):first-child {
+      border-radius: 3px 0 0 3px; }
   .spinbutton.vertical .button, .spinbutton.vertical:dir(rtl) .button {
     padding-top: 8px;
     padding-bottom: 8px; }
@@ -2134,44 +2289,6 @@ GtkCalendar.header column-header .button.titlebutton, column-header .button:hove
   GtkCalendar.header .popover .titlebutton.button:hover {
     text-shadow: none;
     transition: none; }
-  .popover.osd {
-    background-image: none;
-    background-color: #2e3436;
-    border: 1px solid #1c1f1f;
-    color: #eeeeec; }
-    .popover.osd .button {
-      color: white;
-      text-shadow: none;
-      color: #eeeeec;
-      outline-color: rgba(238, 238, 236, 0.2);
-      background-color: transparent;
-      background-clip: padding-box;
-      background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
-      border-color: rgba(0, 0, 0, 0.7);
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
-      text-shadow: 0 1px black;
-      icon-shadow: 0 1px black; }
-      .popover.osd .button:hover {
-        color: white;
-        border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
-        box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
-        text-shadow: 0 1px black;
-        icon-shadow: 0 1px black; }
-      .popover.osd .button:active {
-        color: white;
-        border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
-        box-shadow: none;
-        text-shadow: none;
-        icon-shadow: none; }
-      .popover.osd .button:insensitive {
-        color: #939695;
-        border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7));
-        box-shadow: none;
-        text-shadow: none;
-        icon-shadow: none; }
 
 .entry.cursor-handle,
 .cursor-handle {
@@ -3054,7 +3171,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       background-clip: padding-box;
       background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
       border-color: rgba(0, 0, 0, 0.7);
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black;
       background-color: #2e3436; }
@@ -3064,7 +3181,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
         color: white;
         border-color: rgba(0, 0, 0, 0.7);
         background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
-        box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
         text-shadow: 0 1px black;
         icon-shadow: 0 1px black; }
       .osd .scale.slider:active, .osd
@@ -3080,8 +3197,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       .scale.scale-has-marks-above.scale-has-marks-below.slider:backdrop, .osd
       .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:backdrop {
         color: #eeeeec;
+        border-color: rgba(0, 0, 0, 0.7);
         background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
-        background-clip: padding-box;
         box-shadow: none;
         text-shadow: none;
         icon-shadow: none; }
@@ -3742,7 +3859,7 @@ GtkCalendar.header list-row.button.titlebutton {
     background-clip: padding-box;
     background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
     border-color: rgba(0, 0, 0, 0.7);
-    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black; }
     .app-notification .button.flat, .app-notification .header-bar .titlebutton.button, .header-bar .app-notification .titlebutton.button,
@@ -3764,7 +3881,7 @@ GtkCalendar.header list-row.button.titlebutton {
       color: white;
       border-color: rgba(0, 0, 0, 0.7);
       background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black; }
     .app-notification .button:active, .app-notification .button:checked, .app-notification .button:backdrop:active, .app-notification .button:backdrop:checked,
@@ -3781,17 +3898,17 @@ GtkCalendar.header list-row.button.titlebutton {
     .app-notification .button:insensitive, .app-notification .button:backdrop:insensitive,
     .app-notification.frame .button:insensitive,
     .app-notification.frame .button:backdrop:insensitive {
-      color: #939695;
+      color: #8e9191;
       border-color: rgba(0, 0, 0, 0.7);
-      background-image: linear-gradient(to bottom, rgba(66, 71, 73, 0.7));
+      background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none; }
     .app-notification .button:backdrop,
     .app-notification.frame .button:backdrop {
       color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.7);
       background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
-      background-clip: padding-box;
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none; }

diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index f4b199c83d5ee654b36ca2ae9e19f99d19589c69..5ed69f378fad1920bee6d9af38ce2b9d66d9f026 100644 (file)
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -132,13 +132,17 @@ GtkTextView {
   .grid-child:selected {
     outline-offset: -2px; }
 
-.app-notification,
+.popover.osd, .app-notification,
 .app-notification.frame, .osd {
   color: #eeeeec;
+  border-color: rgba(255, 255, 255, 0.1);
+  background-color: rgba(46, 52, 54, 0.7);
+  background-clip: padding-box;
   outline-color: rgba(238, 238, 236, 0.3);
+  box-shadow: none;
   text-shadow: 0 1px black;
   icon-shadow: 0 1px black; }
-  .app-notification:backdrop, .osd:backdrop {
+  .popover.osd:backdrop, .app-notification:backdrop, .osd:backdrop {
     text-shadow: none; }
 
 /*********************
@@ -370,6 +374,33 @@ GtkTextView {
         border-color: #a8a8a8;
         background-image: linear-gradient(to bottom, white);
         box-shadow: inset 0 3px transparent, inset 0 2px transparent, inset 0 1px transparent, 0 1px rgba(255, 255, 255, 0); }
+  .osd .entry {
+    background-color: transparent;
+    background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
+    color: white;
+    border-color: rgba(0, 0, 0, 0.7);
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+    box-shadow: none;
+    text-shadow: 0 1px black;
+    icon-shadow: 0 1px black; }
+    .osd .entry:focus {
+      background-color: transparent;
+      background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
+      color: white;
+      border-color: #4a90d9;
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+      box-shadow: inset 0 0 0 1px rgba(74, 144, 217, 0.15);
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black; }
+    .osd .entry:backdrop {
+      background-color: transparent;
+      background-image: linear-gradient(to bottom, #f7f7f7, #ffffff 90%);
+      color: white;
+      border-color: rgba(0, 0, 0, 0.7);
+      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5));
+      box-shadow: none;
+      text-shadow: none;
+      icon-shadow: none; }
 
 /***********
  * Buttons *
@@ -528,7 +559,7 @@ GtkCalendar.header .button.titlebutton {
     background-clip: padding-box;
     background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
     border-color: rgba(0, 0, 0, 0.7);
-    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
     border-color: rgba(255, 255, 255, 0.1);
@@ -541,7 +572,7 @@ GtkCalendar.header .button.titlebutton {
       color: white;
       border-color: rgba(0, 0, 0, 0.7);
       background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black;
       border-color: rgba(255, 255, 255, 0.1);
@@ -556,17 +587,17 @@ GtkCalendar.header .button.titlebutton {
       border-color: rgba(255, 255, 255, 0.1);
       box-shadow: none; }
     .button.osd:insensitive, .button.osd:backdrop:insensitive {
-      color: #8d9091;
+      color: #8e9191;
       border-color: rgba(0, 0, 0, 0.7);
-      background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7));
+      background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none;
       border-color: rgba(255, 255, 255, 0.1); }
     .button.osd:backdrop {
       color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.7);
       background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
-      background-clip: padding-box;
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none;
@@ -582,7 +613,7 @@ GtkCalendar.header .button.titlebutton {
     background-clip: padding-box;
     background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
     border-color: rgba(0, 0, 0, 0.7);
-    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black;
     border-radius: 0;
@@ -605,7 +636,7 @@ GtkCalendar.header .button.titlebutton {
       color: white;
       border-color: rgba(0, 0, 0, 0.7);
       background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black; }
     .osd .button:active, .osd .button:checked, .osd .button:backdrop:active, .osd .button:backdrop:checked {
@@ -616,19 +647,90 @@ GtkCalendar.header .button.titlebutton {
       text-shadow: none;
       icon-shadow: none; }
     .osd .button:insensitive, .osd .button:backdrop:insensitive {
-      color: #8d9091;
+      color: #8e9191;
       border-color: rgba(0, 0, 0, 0.7);
-      background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7));
+      background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none; }
     .osd .button:backdrop {
       color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.7);
       background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
-      background-clip: padding-box;
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none; }
+    .osd .button.flat, .osd .header-bar .titlebutton.button, .header-bar .osd .titlebutton.button,
+    .osd .titlebar .titlebutton.button,
+    .titlebar .osd .titlebutton.button,
+    .osd GtkCalendar.header .titlebutton.button,
+    GtkCalendar.header .osd .titlebutton.button {
+      border-color: transparent;
+      background-color: transparent;
+      background-image: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+      text-shadow: none;
+      icon-shadow: none;
+      box-shadow: none;
+      text-shadow: 0 1px black;
+      icon-shadow: 0 1px black; }
+      .osd .button.flat:hover, .osd .header-bar .titlebutton.button:hover, .header-bar .osd .titlebutton.button:hover,
+      .osd .titlebar .titlebutton.button:hover,
+      .titlebar .osd .titlebutton.button:hover,
+      .osd GtkCalendar.header .titlebutton.button:hover,
+      GtkCalendar.header .osd .titlebutton.button:hover {
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
+        text-shadow: 0 1px black;
+        icon-shadow: 0 1px black;
+        background-clip: padding-box;
+        border-color: transparent;
+        box-shadow: none; }
+      .osd .button.flat:insensitive, .osd .header-bar .titlebutton.button:insensitive, .header-bar .osd .titlebutton.button:insensitive,
+      .osd .titlebar .titlebutton.button:insensitive,
+      .titlebar .osd .titlebutton.button:insensitive,
+      .osd GtkCalendar.header .titlebutton.button:insensitive,
+      GtkCalendar.header .osd .titlebutton.button:insensitive {
+        color: #8e9191;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none;
+        background-image: none;
+        border-color: transparent;
+        box-shadow: none; }
+      .osd .button.flat:backdrop, .osd .header-bar .titlebutton.button:backdrop, .header-bar .osd .titlebutton.button:backdrop,
+      .osd .titlebar .titlebutton.button:backdrop,
+      .titlebar .osd .titlebutton.button:backdrop,
+      .osd GtkCalendar.header .titlebutton.button:backdrop,
+      GtkCalendar.header .osd .titlebutton.button:backdrop {
+        border-color: transparent;
+        background-color: transparent;
+        background-image: none;
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+        text-shadow: none;
+        icon-shadow: none; }
+      .osd .button.flat:active, .osd .header-bar .titlebutton.button:active, .header-bar .osd .titlebutton.button:active,
+      .osd .titlebar .titlebutton.button:active,
+      .titlebar .osd .titlebutton.button:active,
+      .osd GtkCalendar.header .titlebutton.button:active,
+      GtkCalendar.header .osd .titlebutton.button:active, .osd .button.flat:checked, .osd .header-bar .titlebutton.button:checked, .header-bar .osd .titlebutton.button:checked,
+      .osd .titlebar .titlebutton.button:checked,
+      .titlebar .osd .titlebutton.button:checked,
+      .osd GtkCalendar.header .titlebutton.button:checked,
+      GtkCalendar.header .osd .titlebutton.button:checked {
+        color: white;
+        border-color: rgba(0, 0, 0, 0.7);
+        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
+        box-shadow: none;
+        text-shadow: none;
+        icon-shadow: none;
+        background-clip: padding-box;
+        border-color: transparent;
+        box-shadow: none; }
   .button.suggested-action, .header-bar .suggested-action.button.titlebutton,
   .titlebar .suggested-action.button.titlebutton,
   GtkCalendar.header .suggested-action.button.titlebutton {
@@ -748,14 +850,14 @@ GtkCalendar.header .button.titlebutton {
       background-clip: padding-box;
       background-image: linear-gradient(to bottom, rgba(74, 144, 217, 0.5));
       border-color: rgba(0, 0, 0, 0.7);
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black; }
       .osd .button.suggested-action:hover {
         color: white;
         border-color: rgba(0, 0, 0, 0.7);
         background-image: linear-gradient(to bottom, rgba(74, 144, 217, 0.7));
-        box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
         text-shadow: 0 1px black;
         icon-shadow: 0 1px black; }
       .osd .button.suggested-action:active, .osd .button.suggested-action:checked, .osd .button.suggested-action:backdrop:active, .osd .button.suggested-action:backdrop:checked {
@@ -766,16 +868,16 @@ GtkCalendar.header .button.titlebutton {
         text-shadow: none;
         icon-shadow: none; }
       .osd .button.suggested-action:insensitive, .osd .button.suggested-action:backdrop:insensitive {
-        color: #8d9091;
+        color: #8e9191;
         border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7));
+        background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
         box-shadow: none;
         text-shadow: none;
         icon-shadow: none; }
       .osd .button.suggested-action:backdrop {
         color: #eeeeec;
+        border-color: rgba(0, 0, 0, 0.7);
         background-image: linear-gradient(to bottom, rgba(74, 144, 217, 0.5));
-        background-clip: padding-box;
         box-shadow: none;
         text-shadow: none;
         icon-shadow: none; }
@@ -898,14 +1000,14 @@ GtkCalendar.header .button.titlebutton {
       background-clip: padding-box;
       background-image: linear-gradient(to bottom, rgba(239, 41, 41, 0.5));
       border-color: rgba(0, 0, 0, 0.7);
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black; }
       .osd .button.destructive-action:hover {
         color: white;
         border-color: rgba(0, 0, 0, 0.7);
         background-image: linear-gradient(to bottom, rgba(239, 41, 41, 0.7));
-        box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
         text-shadow: 0 1px black;
         icon-shadow: 0 1px black; }
       .osd .button.destructive-action:active, .osd .button.destructive-action:checked, .osd .button.destructive-action:backdrop:active, .osd .button.destructive-action:backdrop:checked {
@@ -916,16 +1018,16 @@ GtkCalendar.header .button.titlebutton {
         text-shadow: none;
         icon-shadow: none; }
       .osd .button.destructive-action:insensitive, .osd .button.destructive-action:backdrop:insensitive {
-        color: #8d9091;
+        color: #8e9191;
         border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7));
+        background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
         box-shadow: none;
         text-shadow: none;
         icon-shadow: none; }
       .osd .button.destructive-action:backdrop {
         color: #eeeeec;
+        border-color: rgba(0, 0, 0, 0.7);
         background-image: linear-gradient(to bottom, rgba(239, 41, 41, 0.5));
-        background-clip: padding-box;
         box-shadow: none;
         text-shadow: none;
         icon-shadow: none; }
@@ -1397,6 +1499,59 @@ GtkCalendar.header .button.titlebutton:visited {
       border-style: none none none solid; }
       .spinbutton .button:backdrop:insensitive:dir(rtl) {
         border-style: none solid none none; }
+  .osd .spinbutton .button {
+    border-color: transparent;
+    background-color: transparent;
+    background-image: none;
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+    text-shadow: none;
+    icon-shadow: none;
+    color: #eeeeec;
+    border-style: none none none solid;
+    border-color: rgba(0, 0, 0, 0.4);
+    border-radius: 0;
+    box-shadow: none;
+    icon-shadow: 0 1px black; }
+    .osd .spinbutton .button:dir(rtl) {
+      border-style: none solid none none; }
+    .osd .spinbutton .button:hover {
+      border-color: transparent;
+      background-color: transparent;
+      background-image: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+      text-shadow: none;
+      icon-shadow: none;
+      color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.4);
+      background-color: rgba(238, 238, 236, 0.1);
+      icon-shadow: 0 1px black;
+      box-shadow: none; }
+    .osd .spinbutton .button:backdrop {
+      border-color: transparent;
+      background-color: transparent;
+      background-image: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+      text-shadow: none;
+      icon-shadow: none;
+      color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.4);
+      icon-shadow: none;
+      box-shadow: none; }
+    .osd .spinbutton .button:insensitive {
+      border-color: transparent;
+      background-color: transparent;
+      background-image: none;
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
+      text-shadow: none;
+      icon-shadow: none;
+      color: #8e9191;
+      border-color: rgba(0, 0, 0, 0.4);
+      icon-shadow: none;
+      box-shadow: none; }
+    .osd .spinbutton .button:last-child {
+      border-radius: 0 3px 3px 0; }
+    .osd .spinbutton .button:dir(rtl):first-child {
+      border-radius: 3px 0 0 3px; }
   .spinbutton.vertical .button, .spinbutton.vertical:dir(rtl) .button {
     padding-top: 8px;
     padding-bottom: 8px; }
@@ -2131,44 +2286,6 @@ GtkCalendar.header column-header .button.titlebutton, column-header .button:hove
   GtkCalendar.header .popover .titlebutton.button:hover {
     text-shadow: none;
     transition: none; }
-  .popover.osd {
-    background-image: none;
-    background-color: #2e3436;
-    border: 1px solid #a1a1a1;
-    color: #eeeeec; }
-    .popover.osd .button {
-      color: white;
-      text-shadow: none;
-      color: #eeeeec;
-      outline-color: rgba(238, 238, 236, 0.2);
-      background-color: transparent;
-      background-clip: padding-box;
-      background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
-      border-color: rgba(0, 0, 0, 0.7);
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
-      text-shadow: 0 1px black;
-      icon-shadow: 0 1px black; }
-      .popover.osd .button:hover {
-        color: white;
-        border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
-        box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
-        text-shadow: 0 1px black;
-        icon-shadow: 0 1px black; }
-      .popover.osd .button:active {
-        color: white;
-        border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7));
-        box-shadow: none;
-        text-shadow: none;
-        icon-shadow: none; }
-      .popover.osd .button:insensitive {
-        color: #8d9091;
-        border-color: rgba(0, 0, 0, 0.7);
-        background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7));
-        box-shadow: none;
-        text-shadow: none;
-        icon-shadow: none; }
 
 .entry.cursor-handle,
 .cursor-handle {
@@ -3207,7 +3324,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       background-clip: padding-box;
       background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
       border-color: rgba(0, 0, 0, 0.7);
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black;
       background-color: #2e3436; }
@@ -3217,7 +3334,7 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
         color: white;
         border-color: rgba(0, 0, 0, 0.7);
         background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
-        box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+        box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
         text-shadow: 0 1px black;
         icon-shadow: 0 1px black; }
       .osd .scale.slider:active, .osd
@@ -3233,8 +3350,8 @@ GtkCheckButton.text-button, GtkRadioButton.text-button {
       .scale.scale-has-marks-above.scale-has-marks-below.slider:backdrop, .osd
       .scale.vertical.scale-has-marks-above.scale-has-marks-below.slider:backdrop {
         color: #eeeeec;
+        border-color: rgba(0, 0, 0, 0.7);
         background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
-        background-clip: padding-box;
         box-shadow: none;
         text-shadow: none;
         icon-shadow: none; }
@@ -3903,7 +4020,7 @@ GtkCalendar.header list-row.button.titlebutton {
     background-clip: padding-box;
     background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
     border-color: rgba(0, 0, 0, 0.7);
-    box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
     text-shadow: 0 1px black;
     icon-shadow: 0 1px black; }
     .app-notification .button.flat, .app-notification .header-bar .titlebutton.button, .header-bar .app-notification .titlebutton.button,
@@ -3925,7 +4042,7 @@ GtkCalendar.header list-row.button.titlebutton {
       color: white;
       border-color: rgba(0, 0, 0, 0.7);
       background-image: linear-gradient(to bottom, rgba(74, 84, 87, 0.7));
-      box-shadow: inset 0 -1px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.1);
+      box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
       text-shadow: 0 1px black;
       icon-shadow: 0 1px black; }
     .app-notification .button:active, .app-notification .button:checked, .app-notification .button:backdrop:active, .app-notification .button:backdrop:checked,
@@ -3942,17 +4059,17 @@ GtkCalendar.header list-row.button.titlebutton {
     .app-notification .button:insensitive, .app-notification .button:backdrop:insensitive,
     .app-notification.frame .button:insensitive,
     .app-notification.frame .button:backdrop:insensitive {
-      color: #8d9091;
+      color: #8e9191;
       border-color: rgba(0, 0, 0, 0.7);
-      background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.7));
+      background-image: linear-gradient(to bottom, rgba(65, 70, 72, 0.5));
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none; }
     .app-notification .button:backdrop,
     .app-notification.frame .button:backdrop {
       color: #eeeeec;
+      border-color: rgba(0, 0, 0, 0.7);
       background-image: linear-gradient(to bottom, rgba(46, 52, 54, 0.7));
-      background-clip: padding-box;
       box-shadow: none;
       text-shadow: none;
       icon-shadow: none; }